<template>
  <div>
    <van-sticky>
      <!-- 顶部导航栏 -->
      <van-row type="flex" justify="center">
        <van-col span="24" class="s">
          <van-nav-bar @click-left="onClickLeft" title="我的京东">
            <template #left>
              <div class="left_arrow">
                <van-icon name="arrow-left" size="20" />
              </div>
            </template>
          </van-nav-bar>
        </van-col>
      </van-row>
      <!-- 头部 -->
      <van-row type="flex" class="background_img">
        <van-col span="24">
          <div class="head" @click="login" v-if="!showname">
            <van-image
              round
              fit="cover"
              width="50px"
              height="50px"
              :src="user.user_img"
            />
            <div class="font">
              <div class="username">
                {{ user.username == "" ? "登录" : user.username }}
              </div>
              <div class="name_down_1">京享值</div>
              <div class="name_down_2">小白守约></div>
            </div>
          </div>
        </van-col>
        <van-grid :border="false" :column-num="3" gutter="6px">
          <van-grid-item>
            <div class="num">{{ conllectionNum }}</div>
            <div class="num_title">商品收藏</div>
          </van-grid-item>
          <van-grid-item>
            <div class="num">1</div>
            <div class="num_title">店铺收藏</div>
          </van-grid-item>
          <van-grid-item>
            <div class="num">100</div>
            <div class="num_title">我的足迹</div>
          </van-grid-item>
        </van-grid>
        <div class="plus_img">
          <div class="plus">
            <img src="../assets/imgs/plus标志.png" alt="" />
            <div class="splice">|</div>
            <div class="splice_after_font">现在续费，可享多重优惠</div>
            <button class="plus_button">立即续费</button>
          </div>
        </div>
      </van-row>
      <div class="order">
        <van-grid :border="false" :column-num="5" gutter="10px">
          <van-grid-item v-for="item in my_orderList" :key="item.id">
            <van-image :src="item.imgUrl" />
            <div class="order_font">{{ item.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="center">
        <van-grid :column-num="5" :border="false">
          <van-grid-item>
            <div class="center_font">9</div>
            <span class="center_font_title">优惠券</span>
          </van-grid-item>
          <van-grid-item>
            <div class="center_font">2000</div>
            <span class="center_font_title">白条额度</span>
          </van-grid-item>
          <van-grid-item>
            <div class="center_font">999</div>
            <span class="center_font_title">京豆</span>
          </van-grid-item>
          <van-grid-item>
            <div class="center_font">0</div>
            <span class="center_font_title">红包</span>
          </van-grid-item>
          <van-grid-item>
            <van-image :src="require('../assets/imgs/我的资产.png')" />
            <span class="center_font_title">我的资产</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="footer">
        <div class="tool">工具与服务</div>
        <van-grid :column-num="4" :border="false">
          <van-grid-item v-for="item in ToolAndServiceList" :key="item.id">
            <van-image :src="item.imgUrl"/>
            <div class="order_font">{{ item.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
    </van-sticky>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";

export default {
  name: "My",
  components: {
    Tabbar,
  },
  data() {
    return {
      usernam: "",
      user_img: "",
      showname: false,
      showImg: false,
      user: {
        username: "",
        password: "",
        user_img: "",
      },
      conllectionNum: 0,
      conllectionNum_list: [],
      my_orderList: [],
      ToolAndServiceList:[],
      buyList: [],
    };
  },
  methods: {},

  mounted() {
    this.getUser();
    this.getLikeNum();
    this.getAllOrderInfo();
    this.getAllBuyProduct();
    this.getAllToolAndService();
  },
 filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 20) {
        return value.slice(0, 20) + "...";
      }
      return value;
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push({
        path: "/details/" + id,
      });
    },
    onClickLeft() {
      this.$router.push("/");
    },
    getUser() {
      this.$axios
        .get("/user")
        .then((res) => {
          if (res.status === 200) {
            this.user = res.data;
          } else {
            console.log("失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    login() {
      this.$router.push({
        path: "/login",
      });
    },
    getLikeNum() {
      let conllectionNum;
      this.$axios.get("/buyList?isInLike=true").then((res) => {
        this.conllectionNum_list = res.data;
        let a = this.conllectionNum_list.map((item) => {
          return item.isInLike;
        });
        conllectionNum = parseInt(a.length);
        return (this.conllectionNum = conllectionNum);
      });
    },
    getAllOrderInfo() {
      this.$axios.get("/myOrder").then((res) => {
          this.my_orderList = res.data;
      });
    },
    getAllToolAndService(){
      this.$axios.get('/ToolAndService').then(res => {
          this.ToolAndServiceList = res.data;
      })
    },
    getAllBuyProduct() {
      this.$axios
        .get("/buyList")
        .then((res) => {
          if (res.statusText == "OK") {
            this.buyList = res.data;
            console.log(res.data);
          } else {
            console.log("出错了");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.s /deep/ .van-icon {
  color: gray;
}
.background_img {
  position: absolute;
  margin-top: 0px;
  height: 195px;
  width: 100%;
  margin: 0px auto;
  background: url("../assets/imgs/header.png") no-repeat;
  background-size: cover;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.deep_img {
  width: 393px;
  width: 200px;
  background-color: red;
}
/**用户名样式*/
.head /deep/ .font {
  color: white;
  width: 200px;
  height: 50px;
  float: left;
  margin-left: 13px;
  margin-top: 14px;
}
.username {
  font-size: 18px;
  font-weight: 500;
}
/**头像样式*/
.head /deep/ .van-image {
  margin-left: 18px;
  margin-top: 15px;
  float: left;
}
.name_down_1 {
  margin-top: 8px;
  width: 55px;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 1);
  font-size: 11px;
  text-align: center;
  border-radius: 30px;
  float: left;
}
.name_down_2 {
  float: left;
  width: 80px;
  margin-left: 8px;
  margin-top: 8px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 1);
  font-size: 11px;
  text-align: center;
  border-radius: 30px;
}
.background_img /deep/ .van-grid-item {
  height: 45px;
}
.background_img /deep/ .van-grid-item__content {
  float: left;
  width: 122px;
  height: 50px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(0, 0, 0, 0);
  margin-bottom: 50px;
}
.num {
  float: left;
  margin-bottom: 5px;
  font-weight: 600;
}
.num_title {
  font-size: 15px;
}
.plus_img {
  margin-top: 0px;
  width: 356px;
  height: 46px;
  margin: 0px auto;
  background: url("../assets/imgs/plus会员.png") no-repeat;
  background-size: cover;
}
.plus /deep/ img {
  width: 57px;
  height: 12px;
  margin-left: 10px;
  float: left;
  margin-top: 15px;
}
.splice {
  margin-left: 11px;
  float: left;
  margin-top: 13px;
  color: #ffe678;
  font-size: 12px;
}
.splice_after_font {
  color: #ffe678;
  height: 15px;
  float: left;
  width: 150px;
  margin-left: 11px;
  margin-top: 12px;
  font-size: 12px;
}
.plus_button {
  float: left;
  background-color: #f7d653;
  border: 0px;
  width: 75px;
  height: 18px;
  border-radius: 25px;
  margin-left: 30px;
  margin-top: 12px;
  font-size: 12px;
}
.order {
  height: 90px;
  width: 393px;
  background-color: white;
  margin-top: 180px;
  position: relative;
  border-radius: 15px;
}
.order /deep/ .van-grid-item__content {
  height: 72px;
  width: 72px;
  margin-left: 13px;
  margin-top: 10px;
}
.order /deep/ .van-image {
  height: 26px;
  width: 26px;
}
.order /deep/ .order_font {
  font-size: 10px;
}
.center {
  height: 80px;
  width: 393px;
  background-color: white;
  margin-top: 15px;
  position: relative;
  border-radius: 15px;
}
.center /deep/ .van-grid-item__content {
  height: 70px;
  margin-top: 5px;
}
.center /deep/ .center_font {
  font-weight: 800;
  font-size: 22px;
  margin-bottom: 10px;
}
.center /deep/ .center_font_title {
  font-size: 10px;
}
.center /deep/ .van-image {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}
.footer {
  height: 200px;
  width: 393px;
  background-color: white;
  margin-top: 15px;
  border-radius: 15px;
}
.footer {
  font-weight: 500;
  font-size: 14px;
  padding: 10px;
}
.footer /deep/ .van-image{
  width: 40px;
  height: 40px;
}
.footer /deep/ .van-grid-item__content{
  margin-top: 15px;
  width: 75px;
  height: 75px;
}
.title{
  margin-top: 15px;
}
.line{
  border: 1px;
  width: 100px;
  border-color: red;
}
.text{
  color: gray;
  font-size: 13px;
  margin-left: 170px;
}
</style>